<template>
	<view class="project-class">
		<view style="background-color: #fff;">
			<image style="width: 100%;" :src="projectData.projectPicture" mode=""></image>
			<view class="top-card">
				<view class="title">{{projectData.experimentCodeName}}</view>
				<view class="price-size">
					<span>￥</span>
					<span style="font-size: 4vw;">{{projectData.experimentPrice}}</span>
				</view>
			</view>
		</view>

		<view class="content">
			<view class="brief">
				{{projectData.brief}}
			</view>
			<view class="content-text">
				{{projectData.projectDesc}}
			</view>
		</view>

		<view class="botton-text" @click="clickAdd(projectData)">
			填写资料
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				projectData: {}
			}
		},
		onLoad(options) {
			this.projectData = JSON.parse(options.data)
			this.projectData.projectPicture = decodeURIComponent(options.img)
		},
		// 监听导航按钮(如果是左边就返回上一页)
		onNavigationBarButtonTap(e) {
			if (e.float == "left") {
				window.history.back(-1);
			}
		},
		methods: {
			// 点击填写资料
			clickAdd(v){
				uni.navigateTo({
					url:'../addProjectInfo/index?experimentCode='+v.experimentCode
				})
			}
		}
	}
</script>

<style lang="less">
	.flex {
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.project-class {
		height: 100%;
		overflow: auto hidden;

		.top-card {
			height: 16vh;
			width: 100%;
			padding: 2vh;

			.title {
				font-size: 5vw;
				font-weight: bold;
			}

			.price-size {
				.flex;
				flex: 0.3;
				height: 5vh;
				color: #bb405a !important;
				justify-content: flex-start;
				margin-top: 4.5vh;
			}
		}

		.content {
			width: 100%;
			height: auto;
			background-color: #FFFFFF;
			margin-top: 2vh;
			padding-top: 2.5vh;
			padding-bottom: 10vh;

			.brief {
				.flex;
				margin-bottom: 2.5vh;
				font-size: 4vw;
				font-weight: bolder;
			}

			.content-text {
				padding: 0 2vh;
				line-height: 1.75;
				font-size: 3.65vw;
				font-weight: 500;
			}
		}

		.botton-text {
			.flex;
			height: 8vh;
			font-size: 3.75vw;
			width: 100%;
			color: #fff;
			background-color: #61d2d6;
			position: fixed;
			bottom: 0;
		}
	}
</style>
